<template>
  <div id="category">
    <nav-bar class="nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>
    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>
      <scroll  id="tab-content" ref="scroll">
        <div>
          <right-top :detailImg="detailImg"></right-top>
          <!-- tabClick方法封装在mixin里面 -->
          <tabbarcontrol
            :titles="['综合', '新品', '销量']"
            @tabClick="tabClick"
          ></tabbarcontrol>
          <right-bottom
            :categoryDetail="detailInfo"
            class="right-bottom"
          ></right-bottom>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import * as a from "network/category";
import * as b from "common/const.js";
import TabMenu from "./childComps/TabMenu.vue";
import NavBar from "../../components/common/navbar/NavBar.vue";
import Scroll from "../../components/common/scroll/Scroll.vue";
import RightTop from "./childComps/RightTop.vue";
import Tabbarcontrol from "../../components/content/tabControl/tabbarcontrol.vue";
import { tabControlMixin, itemListenerMixin } from "common/mixin.js";
import RightBottom from "./childComps/RightBottom.vue";
export default {
  components: { TabMenu, NavBar, Scroll, RightTop, Tabbarcontrol, RightBottom },
  mixins: [tabControlMixin, itemListenerMixin],
  data() {
    return {
      categories: [],
      // 最左边的栏目具体哪一个类
      currentIndex: -1
    };
  },
  computed: {
    // righttop组件需要的数据
    detailImg() {
      if (this.currentIndex === -1) return {};
      return this.categories[this.currentIndex].categoryImg;
    },

    // rightbottom需要的数据
    detailInfo() {
      console.log('detailinfo',this.categories);
      if (this.currentIndex === -1) return {};
      // currentType也在mixin里面
      //obj[key]拿到的是value
      return this.categories[this.currentIndex].categoryDetail[this.currentType]
    }
  },
  methods: {
    _getCategory() {
      a.getCategory().then(res => {
        //   console.log(res);
        // 拿到左侧边栏目每个类别的数据(maitkey\miniwallkey\title)
        this.categories = res.data.category.list;
        console.log("左侧边分类目录的数据categories", this.categories);
        /* 
        初始化每个类别的子数据,
        给categories加上两项属性（右上角的图片和右下角的具体数据）
        */
        for (let i in this.categories) {
          // 右上角数据
          this.categories[parseInt(i)].categoryImg = {};
          // 右下角数据
          this.categories[parseInt(i)].categoryDetail = {
            pop: [],
            new: [],
            sell: []
          };
        }
        console.log("更新后的categories", this.categories);
        // 默认请求第一个分类的右上角图片数据
        this._getCategoryImg(0);
      });
    },
    _getCategoryImg(index) {
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      a.getCategoryImg(mailKey).then(res => {
        console.log("右上角图片数据categoryimg", res.data);
        // 保存右上角的图片数据 引用指向categoryimg
        this.categories[index].categoryImg = res.data;
        // 实际拷贝内容 创建新的内存空间
        this.categories = [...this.categories]
        console.log("现在的this.categories", this.categories);
        
        // 请求右下角三个栏目的详情数据
        this._getCategoryDetail(b.POP);
        this._getCategoryDetail(b.NEW);
        this._getCategoryDetail(b.SELL);
      });
    },
    _getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      a.getCategoryDetail(miniWallkey, type).then(res => {
        console.log("右下角详情数据categoryDEtail", res);
        // 3.将获取的数据保存下来 第一句只是保存了引用 第二句才是实际上的拷贝
        this.categories[this.currentIndex].categoryDetail[type]=res;
        this.categories =[...this.categories]
      });
    },
    // 左边菜单栏切换选项
    selectItem(index) {
      this._getCategoryImg(index);
    }
  },
  created() {
    this._getCategory();
  },
  watch: {
    categories() {
      this.$refs.scroll.refresh()
      console.log(this.categories);
    }
  },
};

</script>

<style scoped>
#category {
  height: 100vh;
}
.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
}

.content {
  height: calc(100% - 93px);
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  display: flex;
  overflow: hidden;
  /* justify-content: space-around; */
}
#tab-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.right-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex: 1;
}
</style>
